@media screen and (min-width:750px) {
    html {
        font-size: 50px!important;
    }
}
html {
    font-size: 50px;
}

body {
    min-width: 320px;
    max-width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background-color: #F8F8F8;
    border: 1px solid #ccc;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
div {
    box-sizing: border-box;
}

@BaseFont:50;

//顶部搜索框
.search-content {
    z-index: 99;
    position: fixed;
    top: 0;
    // left: 0 ;
    width: 15rem;
    height: (88rem/@BaseFont);
    background-color: #FFC001;
    .neibu {
        display: flex;
        width: (682rem/@BaseFont);
        height: (88rem/@BaseFont);
        margin: 0 auto;
        align-items: center;

        .classify {
            height: (60rem/@BaseFont);
            width: (36rem/@BaseFont);
            margin-right: (20rem/@BaseFont);
            background: url(../img/分类.png) no-repeat;
            background-size: (36rem/@BaseFont) (60rem/@BaseFont);
        }
        .search {
            flex: 1;
            height: 100%;
            a {
                display: block;
                position: relative;
                height: (66rem/@BaseFont);
                width: 100%;
                border-radius: (33rem/@BaseFont);
                overflow: hidden;
                background-color: #fff;
                margin-top: (11rem/@BaseFont);
                .wenzi {
                    font-size: (25rem/@BaseFont);
                    line-height: (66rem/@BaseFont);
                    color: #757575;
                    margin-left: (65rem/@BaseFont);
                }
            }
            a::before {
                content: '';
                display: block;
                position: absolute;
                top: (15rem/@BaseFont);
                left: (20rem/@BaseFont);
                width: (36rem/@BaseFont);
                height: (36rem/@BaseFont);
                background: url(../img/放大镜.png) no-repeat;
                background-size: (36rem/@BaseFont) (36rem/@BaseFont);
            }
        }
        .login {
            height: (60rem/@BaseFont);
            width: (36rem/@BaseFont);
            margin-left: (20rem/@BaseFont);
            background: url(../img/登录.png) no-repeat;
            background-size: (36rem/@BaseFont) (60rem/@BaseFont);
        }
    }
}

// 导航栏
.nav {
    margin-top: (88rem/@BaseFont);
    background-color: #F8F8F8;
    .row1,
    .row2 {
        display: flex;
        flex-direction: row;
        .items {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: (142rem/@BaseFont);
            font-size: (22rem/@BaseFont);
            color: #666666;
            p {
                margin-top: (5rem/@BaseFont);
                height: (28rem/@BaseFont);
            }
            span {
                width: (84rem/@BaseFont);
                height: (84rem/@BaseFont);
            }
        }
    }
    .row1 .items:nth-child(1) span {
        background: url(../img/nav-1-1.png) no-repeat;
        background-size: (84rem/@BaseFont) (84rem/@BaseFont);
    }
    .row1 .items:nth-child(2) span {
        background: url(../img/nav-1-2.png) no-repeat;
        background-size: (84rem/@BaseFont) (84rem/@BaseFont);
    }
    .row1 .items:nth-child(3) span {
        background: url(../img/nav-1-3.png) no-repeat;
        background-size: (84rem/@BaseFont) (84rem/@BaseFont);
    }
    .row1 .items:nth-child(4) span {
        background: url(../img/nav-1-4.png) no-repeat;
        background-size: (84rem/@BaseFont) (84rem/@BaseFont);
    }
    .row1 .items:nth-child(5) span {
        background: url(../img/nav-1-5.png) no-repeat;
        background-size: (84rem/@BaseFont) (84rem/@BaseFont);
    }

    .row2 .items:nth-child(1) span {
        background: url(../img/nav-2-1.png) no-repeat;
        background-size: (84rem/@BaseFont) (84rem/@BaseFont);
    }
    .row2 .items:nth-child(2) span {
        background: url(../img/nav-2-2.png) no-repeat;
        background-size: (84rem/@BaseFont) (84rem/@BaseFont);
    }
    .row2 .items:nth-child(3) span {
        background: url(../img/nav-2-3.png) no-repeat;
        background-size: (84rem/@BaseFont) (84rem/@BaseFont);
    }
    .row2 .items:nth-child(4) span {
        background: url(../img/nav-2-4.png) no-repeat;
        background-size: (84rem/@BaseFont) (84rem/@BaseFont);
    }
    .row2 .items:nth-child(5) span {
        background: url(../img/nav-2-5.png) no-repeat;
        background-size: (84rem/@BaseFont) (84rem/@BaseFont);
    }
}

//banner
.banner {
    display: flex;
    // width: 100%;
    // height: (259.5rem/@BaseFont);
    // .bg1 {
    //     flex: 1;
    //     background: url(../img/banner-1.png) no-repeat;
    //     background-size: (250rem/@BaseFont) (259.5rem/@BaseFont);
    // }
    // .bg2 {
    //     flex: 1;
    //     background: url(../img/banner-2.png) no-repeat;
    //     background-size: (250rem/@BaseFont) (259.5rem/@BaseFont);
    // }
    // .bg3 {
    //     flex: 1;
    //     background: url(../img/banner-3.png) no-repeat;
    //     background-size: (250rem/@BaseFont) (259.5rem/@BaseFont);
    // }
    a {
        flex: 1;
        img {
            width: 100%;
            height: 100%;
        }
    }

}

// 双栏：大聚会，场景购，苏宁直播
.shuanglan {
    display: flex;
    margin-top: (3rem/@BaseFont);
    height: (210rem/@BaseFont);
    // 大聚会
    .djh {
        flex: 1;
        position: relative;
        margin: 0 (5rem/@BaseFont);
        border-radius: (20rem/@BaseFont);
        overflow: hidden;
        background: url(../img/djh.png) no-repeat;
        background-size: (362rem/@BaseFont) (210rem/@BaseFont);
        
        // 大聚会左侧
        .djh-left {
            position: absolute;
            bottom: (10rem/@BaseFont);
            left: (10rem/@BaseFont);
            width: (154rem/@BaseFont);
            height: (154rem/@BaseFont);
            img {
                width: 100%;
                height: 100%;
            }
            span {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                height: (28rem/@BaseFont);
                line-height: (28rem/@BaseFont);
                text-align: center;
                padding: 0 (14rem/@BaseFont);
                font-size: (22rem/@BaseFont);
                border-radius: (14rem/@BaseFont);
                background: #FFEBEB;
                color: #FF0000;
            }
        }

        //大聚会右侧
        .djh-right {
            position: absolute;
            right: (10rem/@BaseFont);
            bottom: (10rem/@BaseFont);
            width: (154rem/@BaseFont);
            height: (154rem/@BaseFont);
            img {
                width: 100%;
                height: 100%;
            }
            span {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                height: (28rem/@BaseFont);
                line-height: (28rem/@BaseFont);
                text-align: center;
                padding: 0 (14rem/@BaseFont);
                font-size: (22rem/@BaseFont);
                border-radius: (14rem/@BaseFont);
                background: #FFEBEB;
                color: #FF0000;
            }
        }
    }

    //场景购和苏宁直播
    .cjg-snzb {
        display: flex;
        flex: 1;
        margin: 0 (5rem/@BaseFont);
        border-radius: (20rem/@BaseFont);
        overflow: hidden;

        //场景购
        .cjg {
            position: relative;
            flex: 1;
            background: url(../img/cjg.png) no-repeat;
            background-size: (184rem/@BaseFont) (210rem/@BaseFont);
            a {
                position: absolute;
                bottom: (25rem/@BaseFont);
                left: 50%;
                transform: translateX(-50%);
                width: (136rem/@BaseFont);
                height: (136rem/@BaseFont);
                img {
                    width: 100%;
                    height: 100%;
                }
                span {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    width: 100%;
                    transform: translateX(-50%) translateY(50%);
                    height: (28rem/@BaseFont);
                    line-height: (28rem/@BaseFont);
                    text-align: center;
                    padding: 0 (14rem/@BaseFont);
                    font-size: (22rem/@BaseFont);
                    border-radius: (14rem/@BaseFont);
                    background: #FFF6ED;
                    color: #BD6940;
                }
            }
        }

        // 苏宁直播
        .snzb {
            position: relative;
            flex: 1;
            background: url(../img/slzb.png) no-repeat;
            background-size: (171rem/@BaseFont) (210rem/@BaseFont);
            a {
                position: absolute;
                bottom: (25rem/@BaseFont);
                left: 50%;
                transform: translateX(-50%);
                width: (136rem/@BaseFont);
                height: (136rem/@BaseFont);
                img {
                    width: 100%;
                    height: 100%;
                }
                span {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    width: 100%;
                    transform: translateX(-50%) translateY(50%);
                    height: (28rem/@BaseFont);
                    line-height: (28rem/@BaseFont);
                    text-align: center;
                    padding: 0 (14rem/@BaseFont);
                    font-size: (22rem/@BaseFont);
                    border-radius: (14rem/@BaseFont);
                    background: #FFF6ED;
                    color: #BD6940;
                }
            }
        }
    }
}


// 排行榜，super会员，潮流电子，新品首发
// 双栏2
.shuanglan2 {
    display: flex;
    height: (210rem/@BaseFont);
    margin-top: (10rem/@BaseFont);

    // 双栏左边
    .s-left {
        display: flex;
        flex: 1;
        margin: 0 (5rem/@BaseFont);
        border-radius: (20rem/@BaseFont);
        overflow: hidden;
        .left {
            flex: 1;
            position: relative;
            background: url(../img/排行榜.png) no-repeat;
            background-size: (184rem/@BaseFont) (210rem/@BaseFont);
            a {
                position: absolute;
                bottom: (25rem/@BaseFont);
                left: 50%;
                transform: translateX(-50%);
                width: (136rem/@BaseFont);
                height: (136rem/@BaseFont);
                img {
                    width: 100%;
                    height: 100%;
                }
                span {
                    display: block;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    width: 100%;
                    transform: translateX(-50%) translateY(50%);
                    height: (28rem/@BaseFont);
                    line-height: (28rem/@BaseFont);
                    text-align: center;
                    padding: 0 (14rem/@BaseFont);
                    font-size: (22rem/@BaseFont);
                    border-radius: (14rem/@BaseFont);
                    background: #FFF6ED;
                    color: #BD6940;
                }
            }
        }
        .right {
            position: relative;
            flex: 1;
            background: url(../img/super会员.png) no-repeat;
            background-size: (184rem/@BaseFont) (210rem/@BaseFont);
            a {
                position: absolute;
                bottom: (25rem/@BaseFont);
                left: 50%;
                transform: translateX(-50%);
                width: (136rem/@BaseFont);
                height: (136rem/@BaseFont);
                img {
                    width: 100%;
                    height: 100%;
                }
                span {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    left: 50%;
                    transform: translateX(-50%) translateY(50%);
                    height: (28rem/@BaseFont);
                    line-height: (28rem/@BaseFont);
                    text-align: center;
                    padding: 0 (14rem/@BaseFont);
                    font-size: (22rem/@BaseFont);
                    border-radius: (14rem/@BaseFont);
                    background: #FFF6ED;
                    color: #BD6940;
                }
            }
        }
    }

    // 双栏右边
    .s-right {
        display: flex;
        flex: 1;
        margin: 0 (5rem/@BaseFont);
        border-radius: (20rem/@BaseFont);
        overflow: hidden;
        .left {
            position: relative;
            flex: 1;
            background: url(../img/潮流电子.png) no-repeat;
            background-size: (184rem/@BaseFont) (210rem/@BaseFont);
            a {
                position: absolute;
                bottom: (25rem/@BaseFont);
                left: 50%;
                transform: translateX(-50%);
                width: (136rem/@BaseFont);
                height: (136rem/@BaseFont);
                img {
                    width: 100%;
                    height: 100%;
                }
                span {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    left: 50%;
                    transform: translateX(-50%) translateY(50%);
                    height: (28rem/@BaseFont);
                    line-height: (28rem/@BaseFont);
                    text-align: center;
                    padding: 0 (14rem/@BaseFont);
                    font-size: (22rem/@BaseFont);
                    border-radius: (14rem/@BaseFont);
                    background: #FFF6ED;
                    color: #BD6940;
                }
            }
        }
        .right {
            position: relative;
            flex: 1;
            background: url(../img/新品首发.png) no-repeat;
            background-size: (184rem/@BaseFont) (210rem/@BaseFont);
            a {
                position: absolute;
                bottom: (25rem/@BaseFont);
                left: 50%;
                transform: translateX(-50%);
                width: (136rem/@BaseFont);
                height: (136rem/@BaseFont);
                img {
                    width: 100%;
                    height: 100%;
                }
                span {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    left: 50%;
                    transform: translateX(-50%) translateY(50%);
                    height: (28rem/@BaseFont);
                    line-height: (28rem/@BaseFont);
                    text-align: center;
                    padding: 0 (14rem/@BaseFont);
                    font-size: (22rem/@BaseFont);
                    border-radius: (14rem/@BaseFont);
                    background: #FFF6ED;
                    color: #BD6940;
                }
            }
        }
    }
}

//三栏
.sanlan {
    display: flex;
    margin-top: (10rem/@BaseFont);
    height: (438rem/@BaseFont);
    .left {
        flex: 1;
        margin: 0 (5rem/@BaseFont);
        overflow: hidden;
        border-radius: (20rem/@BaseFont);
        a img {
            width: 100%;
            height: auto;
        }
    }
    .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 0 (5rem/@BaseFont);
        .top {
            flex: 1;
            position: relative;
            height: (210rem/@BaseFont);
            background: url(../img/三栏-top.png) no-repeat;
            background-size: auto (210rem/@BaseFont);
            border-radius: (20rem/@BaseFont);
            margin-bottom: (9rem/@BaseFont);
            overflow: hidden;
            span {
                display: block;
                font-size: (26rem/@BaseFont);
                width: (156rem/@BaseFont);
                height: (48rem/@BaseFont);
                text-align: center;
                line-height: (48rem/@BaseFont);
                color: #fff;
                font-weight: (700rem/@BaseFont);
            }
            .left-bottom-title,
            .right-bottom-title {
                position: absolute;
                bottom: (20rem/@BaseFont);
                display: block;
                height: 28px;
                font-size: (24rem/@BaseFont);
                color: #fff;
                background: #FF7368;
                margin: 0;
                text-align: center;
                line-height: 28px;
                border-radius: 15px;
                padding: 0 5px;
            }
            .t-l {
                position: absolute;
                bottom: (20rem/@BaseFont);
                left: (30rem/@BaseFont);
                width: (120rem/@BaseFont);
                height: (120rem/@BaseFont);
                background: url(../img/三栏-t-l.png) no-repeat;
                background-size: auto (120rem/@BaseFont);
            }
            .left-title {
                position: absolute;
                left: (10rem/@BaseFont);
                top: 0;
            }
            .left-bottom-title {
                position: absolute;
                left: (30rem/@BaseFont);
            }
            .t-r {
                position: absolute;
                bottom: (20rem/@BaseFont);
                right: (50rem/@BaseFont);;
                width: (120rem/@BaseFont);
                height: (120rem/@BaseFont);
                background: url(../img/三栏-t-r.png) no-repeat;
                background-size: auto (120rem/@BaseFont);
            }
            .right-title {
                position: absolute;
                right: (35rem/@BaseFont);
                top: 0;
            }
            .right-bottom-title {
                position: absolute;
                right: (60rem/@BaseFont);
            }
        }
        .bottom {
            flex: 1;
            position: relative;
            height: (210rem/@BaseFont);
            background: url(../img/三栏-bottom.png) no-repeat;
            background-size: auto (210rem/@BaseFont);
            border-radius: (20rem/@BaseFont);
            overflow: hidden;
            margin-top: (9rem/@BaseFont);
            span {
                display: block;
                font-size: (26rem/@BaseFont);
                width: (156rem/@BaseFont);
                height: (48rem/@BaseFont);
                text-align: center;
                line-height: (48rem/@BaseFont);
                color: #fff;
                font-weight: (700rem/@BaseFont);
            }
            .left-bottom-title,
            .right-bottom-title {
                position: absolute;
                bottom: (20rem/@BaseFont);
                display: block;
                height: 28px;
                font-size: (24rem/@BaseFont);
                color: #fff;
                background: #FF7368;
                margin: 0;
                text-align: center;
                line-height: 28px;
                border-radius: 15px;
                padding: 0 5px;
            }
            .t-l {
                position: absolute;
                bottom: (20rem/@BaseFont);
                left: (30rem/@BaseFont);
                width: (120rem/@BaseFont);
                height: (120rem/@BaseFont);
                background: url(../img/三栏-b-l.jpg) no-repeat;
                background-size: auto (120rem/@BaseFont);
            }
            .left-title {
                position: absolute;
                left: (10rem/@BaseFont);
                top: 0;
            }
            .left-bottom-title {
                position: absolute;
                left: (25rem/@BaseFont);
            }
            .t-r {
                position: absolute;
                bottom: (20rem/@BaseFont);
                right: (50rem/@BaseFont);;
                width: (120rem/@BaseFont);
                height: (120rem/@BaseFont);
                background: url(../img/三栏-b-r.png) no-repeat;
                background-size: auto (120rem/@BaseFont);
            }
            .right-title {
                position: absolute;
                right: (35rem/@BaseFont);
                top: 0;
            }
            .right-bottom-title {
                position: absolute;
                right: (55rem/@BaseFont);
            }
        }
    }
}


//猜你喜欢
.cnxh {
    margin: (20rem/@BaseFont) 0;
    height: (60rem/@BaseFont);
    img {
        width: auto;
        height: 100%;
    }
}


// 商品展示
.goods {
    display: flex;
    ul {
        flex: 1;
        margin: 0 (5rem/@BaseFont);
        padding: 0;
        margin-bottom: 100px;
        li {
            margin-bottom: (10rem/@BaseFont);
            background: #fff;
            border-radius: (15rem/@BaseFont);
            width: (364.2rem/@BaseFont);
            overflow: hidden;
            a {
                .img {
                width: 100%;
                height: (364.2rem/@BaseFont);
                }
                .jianjie {
                    padding: 0;
                    height: (80rem/@BaseFont);
                    width: (345rem/@BaseFont);
                    font-size: (26rem/@BaseFont);
                    font-weight: 700;
                    margin: 0 auto;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    display:-webkit-box; 
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:2; 
                    color: #333333;
                }
                .biaoqian {
                    height: (28rem/@BaseFont);
                    width: (345rem/@BaseFont);
                    margin: 0 auto;
                    margin-bottom: (20rem/@BaseFont);
                    span {
                        float: left;
                        font-size: (18rem/@BaseFont);
                        border: (1rem/@BaseFont) solid #FFBB00;
                        padding: 0 (5rem/@BaseFont);
                        margin: 0 (10rem/@BaseFont) 0 0;
                        border-radius: (10rem/@BaseFont);
                        background: #FEFBEE;
                        color: #333333;
                    }
                }
                .jiage-pinglun {
                    width: (345rem/@BaseFont);
                    height: (38rem/@BaseFont);
                    margin: 0 auto;
                    margin-bottom: (20rem/@BaseFont);
                    span:nth-child(1) {
                        float: left;
                        font-size: (36rem/@BaseFont);
                        color: #FF4422;
                        line-height: (38rem/@BaseFont);
                    }
                    span:nth-child(1)::before {
                        content: '￥';
                        font-size: (24rem/@BaseFont);
                    }
                    span:nth-child(2) {
                        float: left;
                        font-size: (20rem/@BaseFont);
                        color: #999999;
                        line-height: (38rem/@BaseFont);
                        margin-left: (13rem/@BaseFont);
                    }
                }

                .xian {
                    width: (345rem/@BaseFont);
                    margin: 0 auto;
                    border-top: 1px solid #d8d6d6;
                }

                .chaoshi {
                    position: relative;
                    width: (345rem/@BaseFont);
                    height: (42rem/@BaseFont);
                    margin: (20rem/@BaseFont) auto;
                    .icon {
                        float: left;
                        width: (42rem/@BaseFont);
                        height: (42rem/@BaseFont);
                        margin-right: (10rem/@BaseFont);
                        background: url(../img/超市图标.png) no-repeat;
                        background-size: (42rem/@BaseFont) (42rem/@BaseFont);
                    }
                    .chaoshiwenzi {
                        float: left;
                        font-size: (24rem/@BaseFont);
                        line-height: (42rem/@BaseFont);
                        color: #666666;
                    }
                }
                .chaoshi::after {
                    position: absolute;
                    top: 0;
                    right: (10rem/@BaseFont);
                    content: '>';
                    font-size: (30rem/@BaseFont);
                    color: #666666;
                }
            }
        }
    }
}


//回到顶部
.huidao {
    position: fixed;
    right: 3%;
    bottom: (210rem/@BaseFont);
    display: block;

    width: (100rem/@BaseFont);
    height: (100rem/@BaseFont);
    border-radius: (50rem/@BaseFont);
    background: #ffffff;
    text-align: center;
    line-height: (100rem/@BaseFont);
    font-size: (80rem/@BaseFont);
    color: #000;
}

//立即登录
.liji {
    position: fixed;
    bottom: (100rem/@BaseFont);
    left: 50%;
    transform: translateX(-50%);
    height: (90rem/@BaseFont);
    width: 15rem;
    img {
        width: 100%;
        height: 100%;
    }
}

// 切换栏
.qiehuanlan {
    position: fixed;
    bottom: 0;
    // left: 0;
    display: flex;
    height: (100rem/@BaseFont);
    width: 15rem;
    background: #fff;
    a {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        span:nth-child(1) {
            width: (48rem/@BaseFont);
            height: (48rem/@BaseFont);
        }
        span:nth-child(2) {
            font-size: (20rem/@BaseFont);
            width: 100%;
            text-align: center;
            color: #666666;
        }
    }
    a:nth-child(1) span:nth-child(1) {
        background: url(../img/切换栏1.png) no-repeat;
        background-size: (48rem/@BaseFont) (48rem/@BaseFont);
    }
    a:nth-child(2) span:nth-child(1) {
        background: url(../img/切换栏2.png) no-repeat;
        background-size: (48rem/@BaseFont) (48rem/@BaseFont);
    }
    a:nth-child(3) span:nth-child(1) {
        background: url(../img/切换栏3.png) no-repeat;
        background-size: (48rem/@BaseFont) (48rem/@BaseFont);
    }
    a:nth-child(4) span:nth-child(1) {
        background: url(../img/切换栏4.png) no-repeat;
        background-size: (48rem/@BaseFont) (48rem/@BaseFont);
    }
    a:nth-child(5) span:nth-child(1) {
        background: url(../img/切换栏5.png) no-repeat;
        background-size: (48rem/@BaseFont) (48rem/@BaseFont);
    }
}